<template>
  <span>
    <svg
      t="1734837079668"
      class="icon"
      viewBox="0 0 1068 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="19541"
      :style="styleCpd"
    >
      <path
        d="M252.622237 809.004596a252.614304 252.614304 0 0 1-31.486765-503.2587v-4.352863a301.406611 301.406611 0 0 1 594.880633-68.660847 288.877568 288.877568 0 0 1-36.146765 575.488683 31.529129 31.529129 0 0 1 0-63.047667 225.819311 225.819311 0 0 0 8.472726-451.479758l-26.244267-0.974363-3.812726-25.990085a238.358944 238.358944 0 0 0-474.176071 34.664037 243.040125 243.040125 0 0 0 1.874591 30.035812l4.501135 35.786673-37.163491-0.3495h-0.730773c-104.521657 0-189.577228 85.034389-189.577228 189.577228s85.034389 189.577228 189.577228 189.577228a31.529129 31.529129 0 0 1 0 63.047667z"
        p-id="19542"
      ></path>
      <path
        d="M500.417679 442.421546m10.590906 0l46.599989 0q10.590907 0 10.590907 10.590906l0 528.878103q0 10.590907-10.590907 10.590907l-46.599989 0q-10.590907 0-10.590906-10.590907l0-528.878103q0-10.590907 10.590906-10.590906Z"
        p-id="19543"
      ></path>
      <path
        d="M487.406543 980.472843m7.488902-7.488902l171.982631-171.982631q7.488902-7.488902 14.977804 0l32.951168 32.951168q7.488902 7.488902 0 14.977804l-171.982631 171.982631q-7.488902 7.488902-14.977804 0l-32.951168-32.951168q-7.488902-7.488902 0-14.977804Z"
        p-id="19544"
      ></path>
      <path
        d="M344.966294 837.223674m7.488902-7.488902l32.951168-32.951168q7.488902-7.488902 14.977804 0l176.198883 176.198883q7.488902 7.488902 0 14.977804l-32.951168 32.951168q-7.488902 7.488902-14.977804 0l-176.198883-176.198883q-7.488902-7.488902 0-14.977804Z"
        p-id="19545"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
